<template>
  <a-modal
    title="报警详情"
    :width="874"
    :visible="visible"
    :confirmLoading="loading"
    :footer="false"
    :dialog-style="{ top: '20px' }"
    @ok="
      () => {
        handleOk();
      }
    "
    @cancel="
      () => {
        handleCancel();
      }
    "
  >
    <a-spin :spinning="loading">
      <div class="导出"> </div>
      <table border="1" width="826px" style="border-color: rgba(151, 151, 151, 1); border: none">
        <tbody>
          <tr>
            <th
              colspan="5"
              height="77px"
              style="color: rgba(0, 0, 0, 1); font-size: 24px; text-align: center"
            >
              报警记录报告单
            </th>
          </tr>
          <tr>
            <th width="12.5%">姓名</th>
            <th width="25%">李小东</th>
            <th width="12.5%">性别</th>
            <th width="25%">男</th>
            <th width="25%" rowspan="5">驾驶员照片</th>
          </tr>
          <tr>
            <th width="12.5%">年龄</th>
            <th width="25%">24岁</th>
            <th width="12.5%">手机号码</th>
            <th width="25%">15858506867</th>
          </tr>
          <tr>
            <th width="12.5%">车牌号</th>
            <th width="25%">浙J·23535</th>
            <th width="12.5%">所属企业</th>
            <th width="25%">永嘉县长顺危险品货运有限公司</th>
          </tr>
          <tr>
            <th width="12.5%">所属部门</th>
            <th width="25%">运输部/长顺一车队</th>
            <th width="12.5%">负责人</th>
            <th width="25%">吴伟俊</th>
          </tr>
          <tr>
            <th width="12.5%">安全码</th>
            <th width="25%">绿色</th>
            <th width="12.5%">当前记分</th>
            <th width="25%">24分</th>
          </tr>
          <tr>
            <th
              colspan="5"
              height="56px"
              style="color: rgba(0, 0, 0, 1); font-size: 16px; text-align: center"
            >
              报警记录
            </th>
          </tr>
        </tbody>
      </table>
      <table border="1" width="826px" style="border-color: rgba(151, 151, 151, 1); border: none">
        <tbody>
          <tr>
            <th width="12.5%">报警名称</th>
            <th width="37.5%">超速驾驶</th>
            <th width="12.5%">报警等级</th>
            <th width="37.5%">紧急</th>
          </tr>
          <tr>
            <th width="12.5%">报警时间</th>
            <th width="37.5%">2021-02-20 00:00:00</th>
            <th width="12.5%">报警地点</th>
            <th width="37.5%">温岭市汽车换乘站东北(和谐大道东)</th>
          </tr>
          <tr>
            <th width="12.5%">持续时间</th>
            <th width="37.5%">3分钟25秒</th>
            <th width="12.5%">持续里程</th>
            <th width="37.5%">2.0km</th>
          </tr>
          <tr>
            <th width="12.5%" style="height: 200px">报警视频照片</th>
            <th colspan="3">
              <img src="" />
            </th>
          </tr>
          <tr>
            <th
              colspan="5"
              height="56px"
              style="color: rgba(0, 0, 0, 1); font-size: 16px; text-align: center"
            >
              处理结果
            </th>
          </tr>
        </tbody>
      </table>
      <table border="1" width="826px" style="border-color: rgba(151, 151, 151, 1); border: none">
        <tbody>
          <tr>
            <th width="12.5%">处理状态</th>
            <th width="37.5%">已处理</th>
            <th width="12.5%">处理方式</th>
            <th width="37.5%">人工处理</th>
          </tr>
          <tr>
            <th width="12.5%">处理人</th>
            <th width="37.5%">张三</th>
            <th width="12.5%">记分</th>
            <th width="37.5%">20分</th>
          </tr>
        </tbody>
      </table>
    </a-spin>
  </a-modal>
</template>

<style lang="less" scoped>
  th {
    height: 50px;
    text-align: center;
    font-size: 13px;
  }
</style>
